<template>
  <div class="app">
    <div class="Gsum">4G</div>
    <div class="Gtm">3G</div>
    <div
      style="width: 400px; height: 200px"
      class="echarts"
      ref="Theside"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },

  mounted() {
    let tdata = [
      { code: "公安机关", stock: "19777", fundPost: "19777" },
      { code: "住房和城乡建筑部门", stock: "16064", fundPost: "16064" },
    ];

    var attackSourcesColor = [
      new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#fff" },
        { offset: 1, color: "#fff900" },
      ]),
      new echarts.graphic.LinearGradient(0, 1, 1, 1, [
        { offset: 0, color: "#fff" },
        { offset: 1, color: "#ff0168" },
      ]),
    ];
    var attaData = [];
    var attaName = [];
    var topName = [];
    tdata.forEach((it, index) => {
      attaData[index] = parseFloat(it.fundPost).toFixed(2);
      attaName[index] = it.stock;
      topName[index] = `${it.code} ${it.stock}`;
    });
    var salvProMax = []; //背景按最大值
    for (let i = 0; i < attaData.length; i++) {
      salvProMax.push(attaData[0]);
    }
    function attackSourcesDataFmt(sData) {
      var sss = [];
      sData.forEach(function (item, i) {
        let itemStyle = {
          color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
        };
        sss.push({
          value: item,
          itemStyle: itemStyle,
        });
      });
      return sss;
    }
    var myChart = echarts.init(this.$refs.Theside);
    myChart.setOption({
      grid: {
        left: "5%",
        right: "2%",
        width: "80%",
        bottom: "50%",
        top: "8%",
        containLabel: true,
      },
      xAxis: {
        type: "value",

        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: function () {
              return "";
            },
          },
          axisPointer: {
            label: {
              show: false,
            },
          },

          pdaaing: [5, 0, 0, 0],
          postion: "right",
          data: attaName,
        },
        {
          //后面数量
          type: "category",
          inverse: true,
          axisTick: "none",
          axisLine: "none",
          show: true,
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: "15",
            },
          },
          data: attackSourcesDataFmt(attaName),
        },
      ],
      series: [
        {
          zlevel: 1,
          name: "",
          type: "bar",
          barWidth: "15px",
          animationDuration: 1500,
          data: attackSourcesDataFmt(attaData),
          align: "center",
          label: {
            show: false,
            fontSize: 10,
            color: "#fff",
            textBorderWidth: 2,
            padding: [2, 0, 0, 0],
          },
        },
      ],
    });
  },

  methods: {},
};
</script>

<style lang="less" scoped>
.app {
  position: relative;
  font-weight: 700;
  .Gsum {
    position: absolute;
    top: 30px;
    left: -20px;
    width: 68px;
    height: 200px;
    color: #a5abaf;
    font-size: 12px;
  }
  .Gtm{
       position: absolute;
    top: 75px;
    left: -20px;
    width: 68px;
    height: 200px;
    color: #a5abaf;
    font-size: 12px;
    
  }
}
</style>
